import React from 'react';
import {connect} from 'dva';
import withRouter from 'umi/withRouter';
import {Layout} from '../../../components';
import { Tabs,Card,Divider,Table,Row, Col,Button,Popover} from 'antd';
import {GetCreateModal,DeliverCreateModal,TicketCreateModal,SureCreateModal,CloseCreateModal,ViewOrderRecordModal} from './orderDetailModal';
import styles from './orderDetail.less';
const {StepBar,DescriptionList,Sticky} =Layout
const { Description } = DescriptionList;
const TabPane = Tabs.TabPane;

const detailContentPopover = (
    <div className="autoPopover">
        <DescriptionList  col={1}>
            <Description term="商品总金额">47,658.00</Description>
            <Description term="其它费用">47,658.00</Description>
            <Description term="优惠金额">47,658.00</Description>
            <Description term="应付总金额">47,658.00</Description>
        </DescriptionList>
    </div>
);
const dataSource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  }, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }];
  
  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  }];
  const description = (
    <DescriptionList className={styles.headerList} size="small" col="2">
      <Description term="创建人">曲丽丽</Description>
      <Description term="订购产品">XX 服务</Description>
      <Description term="创建时间">2017-07-07</Description>
      <Description term="关联单据">
        <a href="">12421</a>
      </Description>
      <Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
      <Description term="备注">请于两个工作日内确认</Description>
    </DescriptionList>
  );
  const tabContent=[{
      title:"订单信息",
      href:"order"
  },{
    title:"付款信息",
    href:"pay"
},{
    title:"发货信息",
    href:"goods"
},{
    title:"发票信息",
    href:"ticket"
},{
    title:"商品明细",
    href:"shop"
}]



class AnchorTab extends React.Component{
    constructor(props){
        super(props);
        this.state={
            activeIndex:0
        }

    }
    jump(aim,index){
        const that=this
        let jump = document.getElementById(aim)
        let total = jump.offsetTop-45
        let distance = document.documentElement.scrollTop || document.body.scrollTop
        if(jump.offsetTop>distance){
            this.setState({
                activeIndex:index
            })
        }
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50
        if (total > distance) {
            smoothDown()
        } else {
            let newTotal = distance - total
            step = newTotal / 50
            smoothUp()
        }
        function smoothDown () {
            if (distance < total) {
                distance += step
        　　　　 document.body.scrollTop = distance
                document.documentElement.scrollTop = distance
                setTimeout(smoothDown, 5)
            } else {
                document.body.scrollTop = total
                document.documentElement.scrollTop = total
                if(jump.offsetTop>distance){
                    that.setState({
                        activeIndex:index
                    })
                }
            }
        }
        function smoothUp () {
            if (distance > total) {
                distance -= step
        　　　　 document.body.scrollTop = distance
                document.documentElement.scrollTop = distance
                setTimeout(smoothUp, 5)
            } else {
                console.log(999)
                document.body.scrollTop = total
                document.documentElement.scrollTop = total
            }
        } 
    }
    onScroll () {
        const aim1=document.getElementById('order').offsetTop;
        const aim2=document.getElementById('pay').offsetTop;
        const aim3=document.getElementById('goods').offsetTop;
        const aim4=document.getElementById('ticket').offsetTop;
        const aim5=document.getElementById('shop').offsetTop;
        
        let scrolled = document.documentElement.scrollTop+45 || document.body.scrollTop+45;
        // console.log(aim2,aim3,aim4,scrolled)
        if(scrolled>=0&&scrolled<aim2){
            this.setState({
                activeIndex:0
            }) 
        }else if(scrolled>=aim2&&scrolled<aim3){
            this.setState({
                activeIndex:1
            }) 

        }else if(scrolled>=aim3&&scrolled<aim4){
            this.setState({
                activeIndex:2
            }) 

        }else if(scrolled>=aim4&&scrolled<aim5){
            this.setState({
                activeIndex:3
            }) 

        }else{
            this.setState({
                activeIndex:4
            }) 

        }
    }
    componentDidMount(){
        window.addEventListener('scroll', this.onScroll.bind(this));

    }
    render(){
        return(
            <Sticky checkStickySupport ={ false }>
                <ul className={styles.anchorTab}>
                    {
                        tabContent.map((item,index)=>{
                            return(
                                <li key={index} onClick={this.jump.bind(this,item.href,index)} className={index==this.state.activeIndex?styles.active:''}>
                                    {item.title}
                                </li>
                            )
                        })
                    }
                </ul>
            </Sticky>
        )
    }
}
function OrderDetail({children, sellOrderDetail , dispatch, location, history}) {
    const {detail}=sellOrderDetail
    const {orderInfor,payInfor,step}=detail;
    return(
        <div className={` orderDetail`}>
            <StepBar/>
            <div>
                <div style={{height:'45px'}}>
                    <AnchorTab />
                </div>
                <div>
                    <div id="order">
                        <Card style={{marginBottom:10}} title="订单信息"  bordered={false}>
                            <Row>
                                <Col span={16}>
                                    {
                                        orderInfor?
                                        <DescriptionList  col={2}>
                                            <Description term="订单编号">{orderInfor.order}</Description>
                                            <Description term="交易方式">{orderInfor.style}</Description>
                                            <Description term="订单状态">{orderInfor.state}</Description>
                                            <Description term="取消时间">
                                                2018-10-08 12:23:15
                                                <div style={{display:'inline-block',marginLeft:10}}>
                                                    <ViewOrderRecordModal/>
                                                </div>
                                            </Description>
                                            <Description term="买家">{orderInfor.buy}</Description>
                                            <Description term="下单时间">{orderInfor.time}</Description>
                                            <Description term="备注">{orderInfor.note}</Description>
                                            <Description term="应付总金额">
                                                ￥<b className="red" style={{fontSize:'22px',marginRight:10,verticalAlign:'-2px'}}>{orderInfor.total}</b>
                                                <Popover content={detailContentPopover} trigger="click">
                                                <a href="javascript:;">金额明细</a>
                                                </Popover>
                                            </Description>
                                        </DescriptionList>:
                                        ''
                                    }
                                    
                                </Col>
                                <Col span={8}>
                                    <div className={styles.orderAction}>
                                        <ul>
                                            <li>
                                                <GetCreateModal/>
                                            </li>
                                            <li>
                                                <DeliverCreateModal/>
                                            </li>
                                            <li>
                                                <TicketCreateModal/>
                                            </li>
                                            <li>
                                                <SureCreateModal/>
                                            </li>
                                            <li>
                                                <CloseCreateModal/>
                                            </li>
                                        </ul>
                                        <div className={styles.create}>
                                            如需线上担保交易
                                            <a href="">创建担保交易订单</a>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </Card>
                    </div>
                    <div id="pay">
                        {
                            payInfor?
                            <Card  style={{marginBottom:10}} title="付款信息" bordered={false}>
                                <DescriptionList style={{ marginBottom: 24 }}>
                                    <Description term="订单编号">{payInfor.order}</Description>
                                    <Description term="下单时间">{payInfor.time}</Description>
                                    <Description term="买家">{payInfor.buy}</Description>
                                    <Description term="订单状态">{payInfor.state}</Description>
                                    <Description term="交易方式">{payInfor.style}</Description>
                                    <Description term="备注">{payInfor.note}</Description>
                                </DescriptionList>
                                {/* <h4 style={{ marginBottom: 16 }}>信息组</h4> */}
                                <Card type="inner" title="申请信息">
                                    {
                                        payInfor.infor.map((item,index)=>{
                                            return(
                                                <div key={index}>
                                                    <DescriptionList size="small" col={1} title="">
                                                        <Description>{item.time}{item.state}</Description>
                                                        <Description>
                                                            {item.des}
                                                        </Description>
                                                    </DescriptionList>
                                                    {
                                                        index<payInfor.infor.length-1?
                                                        <Divider style={{ margin: '16px 0' }} />:
                                                        ''
                                                    }
                                                </div>
                                            )
                                        })
                                    }
                                </Card>
                            </Card>:
                            ''
                        }
                    </div>
                    <div id="goods">
                        {
                            payInfor?
                            <Card  style={{marginBottom:10}} title="发货信息"  bordered={false}>
                                <DescriptionList style={{ marginBottom: 24 }}>
                                    <Description term="订单编号">{payInfor.order}</Description>
                                    <Description term="下单时间">{payInfor.time}</Description>
                                    <Description term="买家">{payInfor.buy}</Description>
                                    <Description term="订单状态">{payInfor.state}</Description>
                                    <Description term="交易方式">{payInfor.style}</Description>
                                    <Description term="备注">{payInfor.note}</Description>
                                </DescriptionList>
                                {/* <h4 style={{ marginBottom: 16 }}>信息组</h4> */}
                                <Card type="inner" title="申请信息">
                                    {
                                        payInfor.infor.map((item,index)=>{
                                            return(
                                                <div key={index}>
                                                    <DescriptionList size="small" col={1} title="">
                                                        <Description>{item.time}{item.state}</Description>
                                                        <Description>
                                                            {item.des}
                                                        </Description>
                                                    </DescriptionList>
                                                    {
                                                        index<payInfor.infor.length-1?
                                                        <Divider style={{ margin: '16px 0' }} />:
                                                        ''
                                                    }
                                                </div>
                                            )
                                        })
                                    }
                                </Card>
                            </Card>:
                            ''
                        }
                    </div>
                    <div id="ticket">
                        {
                            payInfor?
                            <Card title="发票信息"  style={{marginBottom:10}}  bordered={false}>
                                <DescriptionList style={{ marginBottom: 24 }}>
                                    <Description term="订单编号">{payInfor.order}</Description>
                                    <Description term="下单时间">{payInfor.time}</Description>
                                    <Description term="买家">{payInfor.buy}</Description>
                                    <Description term="订单状态">{payInfor.state}</Description>
                                    <Description term="交易方式">{payInfor.style}</Description>
                                    <Description term="备注">{payInfor.note}</Description>
                                </DescriptionList>
                                {/* <h4 style={{ marginBottom: 16 }}>信息组</h4> */}
                                <Card type="inner" title="申请信息">
                                    {
                                        payInfor.infor.map((item,index)=>{
                                            return(
                                                <div key={index}>
                                                    <DescriptionList size="small" col={1} title="">
                                                        <Description>{item.time}{item.state}</Description>
                                                        <Description>
                                                            {item.des}
                                                        </Description>
                                                    </DescriptionList>
                                                    {
                                                        index<payInfor.infor.length-1?
                                                        <Divider style={{ margin: '16px 0' }} />:
                                                        ''
                                                    }
                                                </div>
                                            )
                                        })
                                    }
                                </Card>
                            </Card>:
                            ''
                        }
                    </div>
                    <div id="shop">
                        <Card title="商品明细" style={{marginBottom:10}} bordered={false}>
                            <Table dataSource={dataSource} columns={columns} />
                        </Card>       
                    </div>
                </div>
            </div>
        </div>
    )

}

export default withRouter(connect(({sellOrderDetail }) => ({sellOrderDetail }))(OrderDetail));
